import ProTable from "@ant-design/pro-table"
import { FjCompanyEntity } from "@sker/model"
import { Button, Modal } from "antd"
import { PlusOutlined } from "@ant-design/icons"
import { BetaSchemaForm } from "@ant-design/pro-form"
import { useRef, useState } from "react"
import { useAxiosWebPost, useLocalStorage, useModalForm, useModel } from '@sker/sdk'
import { ActionType } from "@ant-design/pro-components"
export const FjCompanyUserList: React.FC<{ id: string }> = ({ id }) => {
    const model = useModel(FjCompanyEntity)
    const [company, setCompany] = useState<any>()
    const localStorage = useLocalStorage('COMPANY_CHILD_CID')
    const { fetch: fetchNextCid } = useAxiosWebPost('imeepos/core/rest/nextval')
    const { fetch: addUser } = useAxiosWebPost('fj/yd/user/addUser')
    const actionRef = useRef<ActionType>()
    const toCid = (cid: number, length: number) => {
        return (Array(length).join('0') + cid).slice(-length);
    }
    const { modalProps, formProps, setOpen, record, form } = useModalForm({
        title: '添加企业子账号',
        columns: async () => {
            let nextCid = record?.cid || localStorage.get()
            if (!nextCid) {
                nextCid = await fetchNextCid({ field: 'fj_company_user_uid' })
                localStorage.set(nextCid)
            }
            form.setFieldsValue({
                status: '1',
                username: `${company?.user?.username}${toCid(nextCid, 4)}`,
                uid: nextCid,
                company_id: company?.id,
            });
            return [
                {
                    dataIndex: 'id',
                    formItemProps: {
                        hidden: true
                    }
                },
                {
                    dataIndex: 'uid',
                    formItemProps: {
                        hidden: true
                    }
                },
                {
                    dataIndex: 'company_id',
                    formItemProps: {
                        hidden: true
                    }
                },
                {
                    title: '账号',
                    dataIndex: 'username',
                    fieldProps: {
                        placeholder: '请输入账号',
                        disabled: true
                    },
                    formItemProps: {
                        rules: [{ required: true, message: '企业账号必填' }],
                    }
                },
                {
                    title: '密码',
                    valueType: 'password',
                    dataIndex: 'password'
                },
                {
                    title: '成员姓名',
                    dataIndex: 'realname'
                },
                {
                    title: '账号状态',
                    valueType: 'select',
                    dataIndex: 'status',
                    valueEnum: {
                        0: '禁用',
                        1: '启用'
                    }
                }
            ]
        },
        onFinish: async (values) => {
            await addUser(values)
            localStorage.remove()
            setOpen(false)
            actionRef.current?.reload();
        }
    })
    const title = <div className="flex center">
        <span style={{ color: 'red' }}>{company?.user.username} {company?.title}</span>
        <div className="flex-1"></div>
        <Button type={'primary'} icon={<PlusOutlined />} onClick={e => {
            localStorage.remove()
            setOpen(true)
        }}>添加</Button>
    </div>
    return <>
        <Modal {...modalProps}>
            <BetaSchemaForm {...formProps} />
        </Modal>
        <ProTable
            title={() => title}
            headerTitle={title}
            search={false}
            toolBarRender={false}
            rowKey={record => record.id}
            actionRef={actionRef}
            request={async () => {
                return model.getOne(id, ['id', 'title', { user: ['username'] }, { 'users': ['id', 'uid', 'status', 'create_date', 'user_id', { user: ['username', 'realname'] }] }]).then((res: any) => {
                    const { data } = res;
                    const { users, title, user, id } = data;
                    setCompany({ title, user, id })
                    return {
                        data: users,
                        total: users.length
                    }
                })
            }}
            columns={[
                { title: '编号', dataIndex: 'uid' },
                { title: '账号', dataIndex: ['user', 'username'] },
                { title: '成员姓名', dataIndex: ['user', 'realname'] },
                { title: '开设日期', dataIndex: 'create_date', valueType: 'date' },
                {
                    title: '账号状态', dataIndex: 'status', valueEnum: {
                        0: '禁用',
                        1: '启用'
                    }
                }
            ]} />
    </>
}